<template>
  <div ref="container" class="baseListComponent p-12">
    <div class="f-c f-1 o-a">
      <VQueryForm :config="queryFormConfig" @query="query">
        <template #query2="form">
          <el-form-item label="custom" prop="query2" class="form-item">
            <el-input v-model="form.form.query2" placeholder="请输入自定义插槽内容" />
          </el-form-item>
        </template>
      </VQueryForm>
      <VTable
        ref="table"
        :config="tableColumnsConfig"
        :data="tableData"
        :total="total"
        :loading="loading"
        :page-num.sync="queryParams.pageNum"
        :page-size.sync="queryParams.pageSize"
        serializable
        selectable
        @refresh="getTableData"
        @selection-change="selectionChange"
        @sort="sort"
      >
        <template #top-action>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="showAdd()">新增</el-button>
        </template>
        <template #customName>
          <el-table-column label="表格选项4-自定义插槽" align="center" prop="deviceModelId">
            <template slot-scope="scope">
              <div>定义name属性，table-column通过#name属性设置插槽内容</div>
              <div>
                属性值的获取方式为
                <code>scope.row</code>
              </div>
            </template>
          </el-table-column>
        </template>
        <template #column-action>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
              <el-button type="text" size="mini" @click="showDeleteDialog(scope.row)">删除</el-button>
              <el-button type="text" size="mini" @click="showDetailDialog(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </template>
      </VTable>
    </div>
    <!-- 增改查 dialog -->
    <el-dialog :title="title" :visible.sync="open" :modal="false" :fullscreen="true" width="100%" :center="true">
      <VForm ref="form" :config="formConfig" :action="action" :object="selectObj" :label-width="200">
        <template #nickName="slotProps">
          <el-input v-model="slotProps.form.nickName" placeholder="请输入用户昵称" maxlength="30" style="width: 100%" />
        </template>
      </VForm>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="action !== 'view'" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import config from './config'
import { list, del, add, update } from './api'

export default {
  name: 'CommonModule',
  components: {},
  mixins: [config],
  data() {
    return {
      // 查询参数
      queryParams: {
        // 公共分页字段
        pageNum: 1,
        pageSize: 10
      },
      // 公共动作，包含add，edit，view
      action: '',
      // 公共table属性
      tableData: [],
      total: 0,
      // 公共新增/修改/查看弹窗属性
      title: '',
      open: false,
      loading: false,
      // 当前表格行内操作所选对象
      selectObj: {},
      // 当前表格勾选对象数组，可用于批量操作
      selectObjs: [],
      // 查询下拉框数据
      options3: [],
      // 字典数据(模拟)
      dictData: [
        {
          value: '1',
          label: '模拟字典1',
          cssClass: 'info'
        },
        {
          value: '2',
          label: '模拟字典2',
          cssClass: 'success'
        }
      ]
    }
  },
  watch: {
    queryParams: {
      handler() {
        this.getTableData()
      },
      deep: true
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    query(v) {
      this.queryParams = {
        ...this.queryParams,
        ...v,
        pageNum: 1
      }
    },
    sort(v) {
      this.queryParams = {
        ...this.queryParams,
        orderList: JSON.stringify(v),
        pageNum: 1
      }
    },
    selectionChange(rows) {
      this.selectObjs = rows
    },
    showAdd() {
      this.action = 'add'
      this.title = '新增'
      this.open = true
      this.selectObj = {
        isMaintenance: '1'
      }
    },
    showEditDialog(row) {
      this.action = 'edit'
      this.title = '修改'
      this.open = true
      this.selectObj = { ...row }
    },
    showDetailDialog(row) {
      this.action = 'view'
      this.title = '查看'
      this.open = true
      this.selectObj = { ...row }
    },
    // 增/改
    submitForm() {
      // form子组件的ref
      const formRef = this.$refs.form.$refs.form
      // form子组件的form对象
      const formObject = { ...this.$refs.form.form }
      formRef.validate((valid) => {
        if (valid) {
          if (formObject.inDate && formObject.outDate) {
            if (
              formObject.inDate.split('-').join('') >
              formObject.outDate.split('-').join('')
            ) {
              this.$message.error('退场日期不能早于进场日期')
              return
            }
          }
          if (this.action === 'add') {
            add(formObject).then(() => {
              this.$message.success('新增成功')
              this.open = false
              this.getTableData()
            })
          } else {
            update(formObject).then(() => {
              this.$message.success('修改成功')
              this.open = false
              this.getTableData()
            })
          }
        }
      })
    },
    // 删
    showDeleteDialog(row) {
      this.$modal
        .confirm('您是否确定要删除所选择数据？')
        .then(() => {
          return del(row.id)
        })
        .then(() => {
          this.getTableData()
          this.$message.success('删除成功')
        })
    },
    // 查
    getTableData() {
      this.loading = true
      list(this.queryParams).then((res) => {
        this.loading = false
        const { rows, total } = res
        if (rows && _.isNumber(total)) {
          this.tableData = rows
          this.total = total
        }
      })
    }
  }
}
</script>
